import React, { Component, useEffect, useState } from 'react';
import { Input, Table, Space, Form, Alert } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import service from '../../../utils/service';
import { Button, Modal, Drawer } from 'antd';




interface DataType {
    name: string;
    name2: string;
}



let data: DataType[] = [
];

function First() {
    const columns: ColumnsType<DataType> = [
        {
            title: '一级分类名称',
            dataIndex: 'name',
            key: 'name',

        },
        {
            title: '二级分类名称',
            dataIndex: 'name2',
            key: 'name2',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => { showDrawer(record) }}> 编辑 </a>
                    <a onClick={() => { del(record) }}>删除</a>
                </Space>
            ),
        },
    ];

    const [openn, setOpenn] = useState(false);
    const [form] = Form.useForm()
    //打开抽屉
    const showDrawer = (record: any) => {
        setOpenn(true);
        form.setFieldsValue(record)
    };
    //关闭抽屉
    const onClose = () => {
        setOpenn(false);
    };

    //发请求
    useEffect(() => {
        service({
            url: 'http://localhost:3000/safeList'
        }).then(res => {
            setdata(res.data)
        })
    }, [])
    const [data, setdata] = useState([])
    const [open, setOpen] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);


    //窗口
    const showModal = () => {
        setOpen(true);
    };



    //定义表单的值
    const [text, settext] = useState([])
    const [text2, settext2] = useState([])



    //获取表单里的值
    const text1 = (e: any) => {
        settext(e.target.value)
    }
    const text3 = (e: any) => {
        settext2(e.target.value)
    }


    //确定后执行
    const handleOk = () => {
        setConfirmLoading(true);
        service({
            url: 'http://localhost:3000/safeList',
            method: 'POST',
            data: {
                name: text,
                name2: text2
            }
        }).then(res => {
            //提交后再发请求获取最新列表
            service({
                url: 'http://localhost:3000/safeList'
            }).then(res => {
                setdata(res.data)
                settext2([])
                settext([])
            })
        })

        setTimeout(() => {
            setOpen(false);
            setConfirmLoading(false);
        }, 2000);
    };

    //取消后执行
    const handleCancel = () => {

        setOpen(false);
    };
    //删除
    const del = (id: any) => {
        service({
            url: `http://localhost:3000/safeList/${id.id}`,
            method: 'DELETE'
        }).then(res => {
            alert('删除成功')
            service({
                url: 'http://localhost:3000/safeList'
            }).then(res => {
                setdata(res.data)
            })
        })

    }

    //修改成功
    const onFinish = (values: any) => {

        service({
            url: `http://localhost:3000/safeList/${values.id}`,
            method: 'patch',
            data: {
                name: values.name,
                name2: values.name2
            }
        }).then(res => {
            alert('修改成功')
            service({
                url: 'http://localhost:3000/safeList'
            }).then(res => {
                setdata(res.data)
            })

        })




    };
    //查询
    const [text6, settext6] = useState([])

    const search = () => {
        console.log(text6);
        service({
            url: `http://localhost:3000/safeList`,
            params: {
                name: text6
            }
        }).then(res => {
            console.log(res.data);
            setdata(res.data)



        })


    }
    const text5 = (e: any) => {
        settext6(e.target.value)
    }
    //重置
    const chongzhi = () => {
        service({
            url: 'http://localhost:3000/safeList'
        }).then(res => {
            setdata(res.data)
            alert('重置成功')
        })
      
    }





    return (
        <div>
            <Input onChange={text5} style={{ width: '300px' }} />
            <Button type="primary" style={{ margin: "0px 10px 0px 10px" }} onClick={search}  >查询</Button>
            <Button style={{ margin: "0px 10px 0px 10px" }} onClick={chongzhi} >重置</Button>
            <Button type="primary" style={{ margin: "0px 10px 0px 10px" }} onClick={showModal} >添加一级分类</Button>

            <Modal
                title="添加分类"
                open={open}
                onOk={handleOk}
                confirmLoading={confirmLoading}
                onCancel={handleCancel}
            >
                <Form.Item
                    label="一级分类" name="username"  >
                    <Input onChange={text1}></Input>
                </Form.Item>
                <Form.Item
                    label="二级分类" name="username"><Input onChange={text3} ></Input>
                </Form.Item>
            </Modal>
            <div style={{ border: '1px solid #bae7ff', backgroundColor: '#e6f7ff', height: '50px', lineHeight: '50px', borderRadius: '5px', marginTop: '20px', textIndent: '2em' }}>
                查询结果：共计{'55'}条数据
            </div>
            <Table columns={columns} dataSource={data} bordered={true} />
            <Drawer title="Basic Drawer" placement="right" onClose={onClose} open={openn} width='800px'>

                <Form
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 1600 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    autoComplete="off"
                    form={form}

                >
                    <Form.Item
                        label="id"
                        name='id'
                        hidden
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="一级分类名称"
                        name="name"
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="二级分类名称"
                        name="name2"
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            确认
                        </Button>
                    </Form.Item>
                </Form>



            </Drawer>
        </div>
    )

}



export default First